<script setup>
import {ref, onMounted } from "vue";

const picked = ref('One')

const checkedNames = ref([])

const checked = ref(true)

const message = ref(' ')

const count = ref(0)

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` is the native DOM event
  if(event) {
    alert(event.target.tagName)
  }
}

function say(message) {
  alert(message)
}

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

const selected = ref(' ')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }

])

onMounted(() => {
  console.log('the component is now mounted.')
})
</script>

<template>
  <div>Selected: {{ selected }}</div>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <br/>

  <div>Picked: {{ picked }}</div>

  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>

  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br/>

  <div>Checked names: {{ checkedNames }}</div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>

  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>

  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br/>

  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
  <br/>

  <span>Multiline message is:</span>
  <p style="white-space: pre-line">{{message}}</p>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  <br/>

  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />
  <br/>

  <!-- 使用特殊的 $event 变量 -->
  <button @click="warn('Form cannot be submitted yet.', $event)">
    Submit
  </button>
  <!-- 使用内联箭头函数 -->
  <button @click="(event) => warn('Form cannot be submitted yet.', event)">
    submit
  </button>

  <button @click="say('hello')">Say hello</button>
  <button @click="say('bye')">Say bye</button>

  <button @click="greet">Greet</button>
  <button @click="count++">Add 1</button>
  <p>The count is: {{ count }}</p>
</template>

<style scoped>
select[multiple] {
  width: 100px;
}
</style>